<!--
 * @Author: zhuxiaoyi
 * @Date: 2024-01-09 10:50:36
 * @LastEditor: zhuxiaoyi
 * @LastEditTime: 2025-01-23 14:49:15
 * @Description: 
-->
<template>
  <el-row>
    <el-col :span="24" style="padding: 20px">
      <el-row>
        <el-col :span="10" :style="`padding-right: 10px;`">
          <el-card style="width: 100%">
            <el-row>
              <el-col
                :span="24"
                class="type-search-container"
                style="margin-bottom: 20px"
              >
                <el-input
                  :prefix-icon="Search"
                  :size="'small'"
                  v-model="filterText"
                  placeholder="算法类型查询"
                  @enter.keyup=""
                />
                <el-button size="small" type="primary" style="margin-left: 10px"
                  >搜索</el-button
                >
              </el-col>
            </el-row>
            <el-row style="margin-bottom: 10px">
              <el-col :span="12" style="box-sizing: border-box; padding: 0 5px">
                <el-button
                  plain
                  size="small"
                  style="width: 100%"
                  type="primary"
                  @click="addfirstLevelTypeDiaOpenHandler"
                >
                  新增一级目录
                </el-button>
              </el-col>
              <el-col :span="12" style="box-sizing: border-box; padding: 0 5px">
                <el-button
                  plain
                  size="small"
                  style="width: 100%"
                  type="primary"
                  @click="clearTypeHanlder"
                >
                  全部算法
                </el-button>
              </el-col>
            </el-row>
            <el-row style="margin-bottom: 10px">
              <el-col :span="8" style="box-sizing: border-box; padding: 0 5px">
                <el-button
                  plain
                  size="small"
                  :disabled="!algorithmType.id"
                  style="width: 100%"
                  type="primary"
                  @click="addTypeDiaOpenHandler"
                >
                  新增子目录
                </el-button>
              </el-col>
              <el-col :span="8" style="box-sizing: border-box; padding: 0 5px">
                <el-button
                  plain
                  size="small"
                  :disabled="!algorithmType.id"
                  style="width: 100%"
                  type="primary"
                  @click="eidtTypeDiaOpenHandler"
                >
                  编辑
                </el-button>
              </el-col>
              <el-col :span="8" style="box-sizing: border-box; padding: 0 5px">
                <el-popconfirm
                  title="确定要删除这个文件夹么"
                  @confirm="deleteTypeHandler"
                >
                  <template #reference>
                    <el-button
                      :disabled="!algorithmType.id"
                      plain
                      size="small"
                      style="width: 100%"
                      type="primary"
                    >
                      删除
                    </el-button>
                  </template>
                </el-popconfirm>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-tree
                  :style="`height: ${view.height - 320}px; overflow:auto;`"
                  ref="treeRef"
                  class="filter-tree"
                  :data="treeData"
                  :props="defaultProps"
                  default-expand-all
                  v-loading="treeDataLoading"
                  @node-click="handleNodeClick"
                  :expand-on-click-node="false"
                >
                  <template #default="{ node, data }">
                    <div
                      :class="`custom-tree-node1 ${
                        data.id == algorithmType.id ? 'selectNode' : ''
                      }`"
                      :title="`${node.label}--【 ${data.des} 】`"
                    >
                      <div class="node-name">
                        <el-icon
                          v-if="node.isLeaf"
                          color="#8d9095"
                          style="margin-right: 5px; font-size: 16px"
                        >
                          <ElementPlus />
                        </el-icon>
                        <el-text type="primary">『 {{ node.label }} 』</el-text>
                        <span
                          style="color: #999; font-size: smaller"
                          v-if="data.des"
                        >
                          {{ data.des }}</span
                        >
                      </div>
                      <div>
                        <el-link
                          type="primary"
                          @click.stop="openAddToTypeDialog(data.id)"
                        >
                          增减
                        </el-link>
                      </div>
                    </div>
                  </template>
                </el-tree>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="14">
          <el-card>
            <el-row>
              <el-col
                :span="24"
                style="
                  display: flex;
                  justify-content: space-between;
                  margin-bottom: 20px;
                "
              >
                <div class="search-container">
                  <el-input
                    size="small"
                    placeholder="算法查询"
                    :prefix-icon="Search"
                    style="width: 200px"
                    @keyup.enter="getAlgorithm"
                    @change="getAlgorithm"
                    clearable
                    v-model="keyword"
                    @clear="getAlgorithm"
                    @input="inputHandler"
                  ></el-input>
                  <el-button size="small" type="primary" @click="getAlgorithm"
                    >搜索</el-button
                  >
                </div>
              </el-col>
            </el-row>
            <el-table
              ref="tableRef"
              :border="true"
              size="small"
              :data="tableData"
              style="width: 100%"
              :height="view.height - 315"
              row-key="id"
              :expand-row-keys="expands"
              v-loading="tableLoading"
            >
              <el-table-column
                :align="'center'"
                type="index"
                label="序号"
                width="60"
              />
              <el-table-column :align="'left'" prop="name" label="算法名称">
                <template #default="scope">
                  <el-link size="small" type="primary">{{
                    scope.row.name
                  }}</el-link>
                </template>
              </el-table-column>
              <!--  <el-table-column :align="''" prop="identifier" label="算法标识" width="">
                                <template #header>
                                    <div style="display:flex;align-items:center">
                                        <el-icon>
                                            <InfoFilled />
                                        </el-icon>
                                        &nbsp;&nbsp;
                                        <span>算法标识</span>
                                    </div>
                                </template>
                                <template #default="scope">
                                    <el-link size="small" type="default">{{
                                        scope.row.identifier
                                        }}</el-link>
                                </template>
                            </el-table-column> -->
              <el-table-column :align="'left'" label="标签">
                <template #default="scope">
                  <el-tag
                    type="primary"
                    style="margin-right: 5px"
                    size="small"
                    v-for="(type, index) in scope.row.typeCN.slice(0, 5)"
                    :key="index"
                  >
                    {{ type }}
                  </el-tag>

                  <el-popover placement="top" :width="300">
                    <template #reference>
                      <el-link
                        type="primary"
                        size="small"
                        v-if="scope.row.typeCN.length > 5"
                        >...</el-link
                      >
                    </template>
                    <div>
                      <el-tag
                        type="primary"
                        style="margin-right: 5px"
                        size="small"
                        v-for="(type, index) in scope.row.typeCN"
                        :key="index"
                      >
                        {{ type }}
                      </el-tag>
                    </div>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column
                :align="'center'"
                prop="version"
                label="版本"
                width="60"
              >
                <template #default="scope">
                  <el-tag size="small"> {{ scope.row.version }}</el-tag>
                </template>
              </el-table-column>
            </el-table>
            <template #footer>
              <div style="margin-top: 5px; width: 100%">
                <pagination-com
                  :pagination="algorithmPagination"
                  @handleSizeChange="algorithmSizeChangeHanlder"
                  @handleCurrentChange="algorithmIndexChangeHanlder"
                ></pagination-com>
              </div>
            </template>
          </el-card>
        </el-col>
      </el-row>
      <add-type-dia
        ref="addTypeRef"
        :typeDia="addType"
        @dialogSubmit="addTypeHandler"
        @closeaddTypeDiaDialog="closeAddTypeDia"
      ></add-type-dia>
      <edit-type-dia
        ref="addTypeRef"
        :typeDia="editType"
        @dialogSubmit="editTypeHandler"
        @closeEditTypeDiaDialog="closeEditTypeDiaDialog"
      ></edit-type-dia>
      <add-to-type-dia
        :addToTypeDia="addToTypeDialog"
        @dialogSubmit="AddToTypeDialogSubmit"
        @closeTransferDiaDialog="AddToTypeDialogClose"
      ></add-to-type-dia>
    </el-col>
  </el-row>
</template>
<script setup lang="ts">
import {
  defineComponent,
  reactive,
  ref,
  toRefs,
  onMounted,
  watch,
  nextTick,
} from "vue";
import paginationCom from "@/components/pagination/paginationCom.vue";
import utils from "@/utils/util";
import { ElMessage, ElMessageBox, genFileId } from "element-plus";
import type { UploadInstance, UploadProps, UploadRawFile } from "element-plus";
import {
  Search,
  CaretRight,
  InfoFilled,
  Edit,
  EditPen,
  Folder,
  FolderOpened,
} from "@element-plus/icons-vue";
import HttpService from "@/api/api";
import { ElInput } from "element-plus";
import * as _ from "lodash";
import addTypeDia from "@/components/algorithmType/addTypeDia.vue";
import addToTypeDia from "@/components/addToTypeDia/addToTypeDia.vue";
import editTypeDia from "@/components/algorithmType/editTypeDia.vue";
import { useSubsystemStore } from "@/store/subsystem";

const subsystemStore = useSubsystemStore();
let tableData = ref([]);
let tableLoading = ref(false);
let algorithmType = ref({
  id: "",
  name: "",
  des: "",
  parentId: "",
  subsystemId:""
});
let algorithmPagination = reactive({
  page_index: 1,
  page_size: 30,
  page_total: 0,
});

let addToTypeDialog = reactive({
  visible: false,
  originData: [],
  algorithmTypeId: "",
});
let tableRef = ref(null);
let expands = ref([]);
const treeData = ref([]);
const treeDataLoading = ref(false);

let keyword = ref("");
let filterText = ref("");
var view = reactive({
  height: window.innerHeight,
});

let addTypeRef = ref(null);
const defaultProps = {
  children: "children",
  label: "name",
  subsystemId: "subsystemId",
};

const getAlgorithm = function () {
  let params = {
    page_size: algorithmPagination.page_size,
    page_index: algorithmPagination.page_index,
    keyword: keyword.value,
    type: algorithmType.value.id.toString(),
  };
  tableData.value.length = 0;
  tableLoading.value = true;
  HttpService.algorithmManage.getAlgorithms(
    params,
    (res) => {
      setTimeout(() => {
        if (res.status == 200) {
          res.data.data.map((item, index) => {
            tableData.value.push(item);
          });
          tableLoading.value = false;
          algorithmPagination.page_total = res.data.total;
        } else {
          console.log("获取信息失败" + res);
          tableLoading.value = false;
        }
      }, 300);
    },
    (error) => {
      console.log(error);
      tableLoading.value = false;
    }
  );
};

const algorithmOptions = ref([]);

const getAllAlgorithm = function () {
  let params = {
    page_size: 1000,
    page_index: 1,
    keyword: "",
  };
  algorithmOptions.value.length = 0;
  addToTypeDialog.originData.length = 0;
  HttpService.algorithmManage.getAlgorithms(
    params,
    (res) => {
      if (res.status == 200) {
        res.data.data.map((item, index) => {
          algorithmOptions.value.push({
            value: item.id,
            label: item.name,
            parameter: item.parameter,
          });
          addToTypeDialog.originData.push({
            key: item.id,
            label:
              item.name + " (" + item.identifier + ")" + "_" + item.version,
            parameter: item.parameter,
          });
        });
      } else {
        console.log("获取信息失败" + res);
      }
    },
    (error) => {
      console.log(error);
    }
  );
};

getAllAlgorithm();

const algorithmSizeChangeHanlder = function (page_size: number) {
  algorithmPagination.page_size = page_size;
  getAlgorithm();
};
const algorithmIndexChangeHanlder = function (page_index: number) {
  algorithmPagination.page_index = page_index;
  getAlgorithm();
};

const getTree = function () {
  let params = {};
  treeData.value.length = 0;
  treeDataLoading.value = true;
  HttpService.AlgorithmTypeManage.getTree(
    params,
    (res) => {
      setTimeout(() => {
        if (res.status == 200) {
          let results = res.data.data;
          results.forEach((result) => {
            if (result.subsystemId == subsystemStore.selectedSubsystem) {
              treeData.value.push(result);
            }
          });
        } else {
          ElMessage({
            message: res,
            type: "error",
          });
        }
        treeDataLoading.value = false;
      }, 300);
    },
    (error) => {
      console.log(error);
      treeDataLoading.value = false;
    }
  );
};

const handleNodeClick = function (type, node) {
  // if (node.isLeaf) {
  algorithmType.value = type;
  getAlgorithm();
  // }
};
const inputHandler = _.debounce(() => {
  getAlgorithm();
}, 300);
const clearTypeHanlder = function () {
  algorithmType.value = {
    id: "",
    name: "",
    des: "",
    parentId: "",
    subsystemId:""
  };
  getAlgorithm();
};

let addType = reactive({
  visible: false,
  name: "",
  des: "",
  parentId: "",
  subsystemId:""
});
let editType = reactive({
  visible: false,
  id:"",
  name: "",
  des: "",
  parentId: "",
  subsystemId:""
});

const addfirstLevelTypeDiaOpenHandler = function () {
  addType.visible = true;
  addType.parentId = "0";
};

const addTypeDiaOpenHandler = function () {
  if (!algorithmType.value.id) {
    ElMessage({
      message: "请选择父节点",
      type: "warning",
    });
  } else {
    addType.visible = true;
    addType.parentId = algorithmType.value.id;
  }
};

const eidtTypeDiaOpenHandler = function () {
  if (!algorithmType.value.id) {
    ElMessage({
      message: "请选择父节点",
      type: "warning",
    });
  } else {
    editType.visible = true;
    editType.parentId = algorithmType.value.parentId;
    editType.name = algorithmType.value.name;
    editType.id = algorithmType.value.id;
    editType.des = algorithmType.value.des;
    editType.subsystemId = algorithmType.value.subsystemId;
  }
};

const closeAddTypeDia = function () {
  addType.visible = false;
};

const closeEditTypeDiaDialog = function () {
  editType.visible = false;
};

const addTypeHandler = function (addTypeData) {
  let params = {
    name: addTypeData.name,
    des: addTypeData.des,
    parentId: addTypeData.parentId,
    subsystemId:addTypeData.subsystemId
  };
  HttpService.AlgorithmTypeManage.addType(
    params,
    (res) => {
      setTimeout(() => {
        if (res.status == 200) {
          ElMessage({
            message: "类型添加成功",
            type: "success",
          });
          algorithmType.value.id = "";
        } else {
          ElMessage({
            message: res,
            type: "error",
          });
        }

        getTree();
      }, 300);
    },
    (error) => {
      console.log(error);
    }
  );
};

const editTypeHandler = function (addTypeData) {
  let params = {
    id:addTypeData.id,
    name: addTypeData.name,
    des: addTypeData.des,
    subsystemId:addTypeData.subsystemId
  };
  HttpService.AlgorithmTypeManage.updateType(
    params,
    (res) => {
      setTimeout(() => {
        if (res.status == 200) {
          ElMessage({
            message: "类型编辑成功",
            type: "success",
          });
          algorithmType.value.id = "";
        } else {
          ElMessage({
            message: res,
            type: "error",
          });
        }
        getTree();
      }, 300);
    },
    (error) => {
      console.log(error);
    }
  );
};

const deleteTypeHandler = function () {
  if (!algorithmType.value.id) {
    ElMessage({
      message: "请选择要删除的目录",
      type: "warning",
    });
  } else {
    let params = {
      id: algorithmType.value.id,
    };
    HttpService.AlgorithmTypeManage.deleteType(
      params,
      (res) => {
        if (res.status == 200) {
          ElMessage({
            message: "目录删除成功",
            type: "success",
          });
          algorithmType.value.id = "";
        } else {
          ElMessage({
            message: res,
            type: "error",
          });
        }
        getTree();
      },
      (error) => {
        console.log(error);
      }
    );
  }
};

const openAddToTypeDialog = async function (id) {
  addToTypeDialog.visible = true;
  addToTypeDialog.algorithmTypeId = id;
};
const AddToTypeDialogClose = function () {
  addToTypeDialog.visible = false;
};
const AddToTypeDialogSubmit = function (submitData) {
  updateAlgorithmsType(submitData);
};

const updateAlgorithmsType = function (submitData) {
  let params = {
    id: submitData.typeId,
    algorithms: submitData.tableData,
    originAlgorithms: submitData.originData,
  };
  HttpService.AlgorithmTypeManage.updateAlgorithmsType(
    params,
    (res) => {
      if (res.status == 200) {
        ElMessage({
          message: "算法类型批量更新成功",
          type: "success",
        });
      } else {
        ElMessage({
          message: res,
          type: "error",
        });
      }
      algorithmType.value.id = submitData.typeId;
      getAlgorithm();
    },
    (error) => {
      console.log(error);
    }
  );
};

watch(
  () => subsystemStore.selectedSubsystem,
  () => {
    getTree();
  }
);

getAlgorithm();
getTree();
</script>
<style lang="scss" scoped>
.search-container {
  width: 260px;
  display: flex;
  justify-content: space-between;
}

.type-search-container {
  display: flex;
  justify-content: space-between;
}

.custom-tree-node1 {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
  overflow: hidden;

  .node-name {
    word-break: break-all;
    width: calc(100% - 40px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 20px;
  }
}

.selectNode {
  .node-name {
    background: #3a3939;
  }
}
</style>
<style lang="scss"></style>
